/<template>
  <div class="address">
    <div class="head">
      <span @click="goBack">返回</span>
      <b>收货地址</b>
    </div>
    <div class="body">
      <ul>
        <li v-for="(item,index) in list" :key="item.id">
          <div>
            <span>{{ item.name }}</span>
            <span>{{ item.tel }}</span>
          </div>
          <div>
            <span>{{ item.province }}</span>
            <span>{{ item.city }}</span>
            <span>{{ item.county }}</span>
            <p>{{ item.addressDetail }}</p>
          </div>
          <div>
            <input
              type="checkbox"
              v-model="item.isDefault"
              @change="changeDefault(item)"
            />
            <span v-if="item.isDefault">已设为默认</span>
            <span v-else>设为默认</span>
            <button>置顶</button>
            <button>复制</button>
            <button @click="deleteAddress(index)">删除</button>
            <button @click="editMask(item,index)">修改</button>
          </div>
        </li>
      </ul>
    </div>
    <div class="foot">
      <button @click="openMask">添加收货地址</button>
    </div>
    <!-- /////////////////////////vant遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <h2>{{ title }}</h2>
          <van-address-edit
            :address-info="addressInfo"
            :area-list="areaList"
            show-postal
            show-delete
            show-set-default
            show-search-result
            :search-result="searchResult"
            :area-columns-placeholder="['省', '区', '县']"
            @save="onSave"
            @delete="onDelete"
            @change-detail="onChangeDetail"
          />
           <!-- :address-info="addressInfo" // 表单数据
            :area-list="areaList"// 选择城市的数据列表
            show-postal // 是否展示邮编
            show-delete // 是否展示删除按钮
            show-set-default // 是否展示默认按钮
            show-search-result // 是否可以搜索地址详情
            :search-result="searchResult" // 搜索详情地址列表数据
            :area-columns-placeholder="['省', '市', '区/县']"// 选择城市默认项
            @save="onSave" // 保存事件
            @delete="onDelete" //删除事件
            @change-detail="onChangeDetail" // 详情输入事件（用于搜索详情） -->
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import axios from "axios";
// // vant的提示组件
import { Toast } from "vant";
// // vant提供的地址数据，需要单独下载
import { areaList } from "@vant/area-data";

export default {
  data() {
    return {
      list: [],// 地址列表
      show: false,//是否展示弹窗
      areaList,// vant的城市数据
      searchResult: [],// 详细地址搜索内容
      title: "新增收货地址",
      addressInfo: {},
      index:null,
    };
  },
  methods: {
    // 返回上一个页面
    goBack() {
      this.$router.go(-1);
    },
    // 修改默认地址
    changeDefault(item) {
      console.log(item.isDefault);
      // 如果当前项为真
      if (item.isDefault) {
        // 把所有数据改完假
        this.list.map((v) => {
          v.isDefault = false;
        });
        // 只有当前为真
        item.isDefault = true;
      }
    },
     // 删除地址
    deleteAddress(index)
    {
      // 接受下标，通过下标截取一个
      this.list.splice(index, 1);
      Toast("已删除");
    },
    // 点击新增按钮，打开弹窗
    openMask() {
      (this.show = true), (this.title = "新增收货地址");
    },
    // 点击修改打开弹窗
    editMask(item,index) {
      console.log(item);
       // 弹窗的标题，区分新增还是修改
      (this.show = true), (this.title = "修改收货地址");
      // 记录当前编辑的下标
      this.addressInfo=item;
      this.index=index;
    },
    // 保存地址
    onSave(value) {
      // push或修改之前，先判断当前的是不是默认，
      //  如果是把其他的都改为false
      if (value.isDefault) {
        this.list.map((v) => {
          v.isDefault = false;
        });
      }
      if (this.title == "新增收货地址") {
        // 如果是新增往数据中push新的地址
        this.list.push(value);
      } 
      else {
        // 如果是修改，把当前下标项重新赋值
        this.list[this.index] = value;
      }
      // console.log(value);
      // this.list.push(value);
      this.addressInfo = {};
      (this.show = false), Toast("已保存");
    },
    // 删除地址
    onDelete() {
      (this.show = false), Toast("已删除");
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
          {
            name: "北京八维",
            address: "北京上地七街",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
  },
  mounted() {
    axios.get("/getAddress").then((res) => {
      this.list = res.data;
    });
  },
};
</script>
 
<style lang="scss">
.address {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.head {
  height: 60px;
  display: flex;
  background-color: rgb(230, 226, 255);
  align-items: center;
  span {
    margin-left: 20px;
  }
  b {
    margin-left: 110px;
  }
}
.body {
  flex: 1;
  overflow-y: scroll;
  background-color: rgb(241, 241, 241);
}
.body li {
  width: 100%;
  height: 180px;
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  div {
    padding: 10px 0;
    span {
      padding: 5px;
    }
    p {
      margin-top: 5px;
      margin-left: 5px;
    }
    button {
      width: 40px;
      margin: 5px;
    }
    button:nth-of-type(1) {
      margin-left: 55px;
    }
  }
}
.foot {
  height: 60px;
  padding: 10px;
  button {
    width: 100%;
    height: 100%;
    background: #f60;
    border: 0;
    color: #fff;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  height: 500px;
  background-color: #fff;
}
</style>